<template>
  <ui-container class="transfer-bitch-detail">
    <div class="header-title">
      <span>转账记录查询</span>
      <!-- 右侧打印、下载 -->
      <div class="header-right-box">
        <div class="download-btn">
          <ui-button class="info-btn" title="下载" @click="download" :loding="isBtnLoading">
            <img src="~@/assets/image/common/iconDownload.png" />
            <a>下载</a>
          </ui-button>
          <ui-button class="info-btn" title="打印" @click="onPrint">
            <img src="~@/assets/image/common/iconPrint.png" />
            <a>打印</a>
          </ui-button>
        </div>
      </div>
    </div>
    <div class="transfer-inquiry-conf">
      <ui-collapse v-model="activeNames">
        <ui-collapse-item name="1" v-loading="isLoading">
          <template slot="title">
            <span>
              转账进度-{{ $msg('dealStateDict')[resultInfo.dealState] }}
              <a class="refresh" @click.stop="qryResultInfo" v-if="dealState.includes(resultInfo.dealState)">刷新</a>
            </span>
          </template>
          <vx-result-step :resultInfo="resultInfo" :name="$msg('dealNameDict')[payerInfo.dealName]"></vx-result-step>
        </ui-collapse-item>
        <ui-collapse-item title="转账详情" name="2" class="transfer-detail mg-top-20">
          <div class="tansfer-info">
            <div class="left-info">
              <div class="title">批量转账信息汇总</div>
              <div class="pay-info">
                <div class="pay-info_bg">基本户</div>
                <div class="pay-name">
                  <ui-tooltip effect="dark" :content="transferInfo.payerName" placement="top-start">
                    <span>{{ transferInfo.payerName }}</span>
                  </ui-tooltip>
                </div>
                <div class="pay-num">{{ transferInfo.payerNum | formatStringFilter }}</div>
              </div>
            </div>
            <div class="center-info">
              <img src="~@/assets/image/transferRemit/then.png" alt="" />
            </div>
            <div class="right-info">
              <table class="total-info">
                <tr>
                  <th width="22%">批次名称</th>
                  <td width="26%">{{ transferInfo.batchName }}</td>
                  <th width="26%">成功总笔数</th>
                  <td width="26%">{{ transferInfo.successTotal }}</td>
                </tr>
                <tr>
                  <th>总比数</th>
                  <td>{{ transferInfo.total }}</td>
                  <th>成功总金额（元）</th>
                  <td>{{ transferInfo.successAmt | numberFilter(2) }}</td>
                </tr>
                <tr>
                  <th>总金额（元）</th>
                  <td>{{ transferInfo.totalAmt | numberFilter(2) }}</td>
                  <th>失败总笔数</th>
                  <td>{{ transferInfo.totalFailed }}</td>
                </tr>
                <tr>
                  <th>手续费（元）</th>
                  <td>{{ transferInfo.serviceCharge | numberFilter(2) }}</td>
                  <th>失败总金额（元）</th>
                  <td>{{ transferInfo.totalFailedAmt | numberFilter(2) }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="table-title">
            <span class="title-text">文件明细</span>
            <ui-radio-group v-model="selected" @change="changeFactor">
              <ui-radio :label="selectStatus[0]">全部明细</ui-radio>
              <ui-radio :label="selectStatus[1]">成功明细</ui-radio>
              <ui-radio :label="selectStatus[2]">失败明细</ui-radio>
            </ui-radio-group>
          </div>
          <!-- 交易明细列表 -->
          <div class="table-detail">
            <ui-table :data="transferDataList" tooltip-effect="dark" v-loading="isLoading">
              <ui-table-column label="序号" width="80" align="center" type="index" :index="formatIndex"></ui-table-column>
              <ui-table-column key="PayeeAcNo" prop="PayeeAcNo" label="收款账号" width="220">
                <template slot-scope="scope">
                  <span>{{ scope.row.PayeeAcNo | formatStringFilter }}</span>
                </template>
              </ui-table-column>
              <ui-table-column key="PayeeAcName" prop="PayeeAcName" label="收款名称" width="240" :show-overflow-tooltip="true"></ui-table-column>
              <ui-table-column key="openBank" prop="openBank" label="开户银行" width="150" :show-overflow-tooltip="true"></ui-table-column>
              <ui-table-column key="PayerAcNo" prop="PayerAcNo" label="付款账号" width="220">
                <template slot-scope="scope">
                  <span>{{ scope.row.PayerAcNo | formatStringFilter }}</span>
                </template>
              </ui-table-column>
              <ui-table-column key="PayerAcName" prop="PayerAcName" label="付款户名" width="150" :show-overflow-tooltip="true"></ui-table-column>
              <ui-table-column key="payMoney" prop="payMoney" label="付款金额（元）" width="150">
                <template slot-scope="scope">
                  <span>{{ scope.row.payMoney | numberFilter(2) }}</span>
                </template>
              </ui-table-column>
              <ui-table-column key="TotalFee" prop="TotalFee" label="手续费（元）" width="120">
                <template slot-scope="scope">
                  <span>{{ scope.row.TotalFee | numberFilter(2) }}</span>
                </template>
              </ui-table-column>
              <ui-table-column
                key="transferPostscript"
                prop="transferPostscript"
                label="转账附言"
                width="110"
                :show-overflow-tooltip="true"
              ></ui-table-column>
              <ui-table-column key="Phone" prop="Phone" label="短信通知" width="110"></ui-table-column>
              <ui-table-column key="dealState" prop="dealState" label="交易状态" width="120">
                <template slot-scope="scope">
                  <span>{{ $msg('dealStateDict')[scope.row.dealState] }}</span>
                </template>
              </ui-table-column>
            </ui-table>
            <ui-pagination
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              :layout="layout"
              :page-sizes="pageSizeList"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </ui-pagination>
          </div>
        </ui-collapse-item>
      </ui-collapse>
      <div class="justify-center mg-top-20">
        <ui-button class="primary-long-btn" @click="goback">返回</ui-button>
        <ui-button class="danger-long-btn" @click="showUndoDialog" v-if="resultInfo.dealState == 1 || resultInfo.dealState == 9">撤销</ui-button>
      </div>
    </div>
    <vx-tips>
      <p>1、本功能适用于企业从已加挂我行企业网银账户向他行进行转账。</p>
      <p>2、跨行转账的服务时间以人民银行支付系统服务时间为准，目前小额支付系统提供7*24小时服务，大额支付系统提供5*8小时服务（9：00-17：00）</p>
    </vx-tips>
    <!-- 撤销弹框 -->
    <vx-dialog
      v-loading="isConfLoad"
      message="确定撤销这笔交易吗？"
      v-model="showConf"
      @confirm="undoTransfer"
      @cancel="undoTransferData = null"
    ></vx-dialog>
    <!-- 撤销结果弹框 -->
    <vx-dialog auto-hide :icon="undoResIcon" :message="undoResMsg" v-model="showSure"></vx-dialog>
    <!-- 打印表格 -->
    <div id="print-form" class="table-special">
      <img src="@/assets/image/common/sealBank.png" class="seal" />
      <h2>批量转账信息</h2>
      <table class="print-collect">
        <tr>
          <th>批次名称</th>
          <td>{{ transferInfo.batchName }}</td>
          <th>成功总笔数</th>
          <td>{{ transferInfo.successTotal }}</td>
        </tr>
        <tr>
          <th>总比数</th>
          <td>{{ transferInfo.total }}</td>
          <th>成功总金额（元）</th>
          <td>{{ transferInfo.successAmt | numberFilter(2) }}</td>
        </tr>
        <tr>
          <th>总金额（元）</th>
          <td>{{ transferInfo.totalAmt | numberFilter(2) }}</td>
          <th>失败总笔数</th>
          <td>{{ transferInfo.totalFailed }}</td>
        </tr>
        <tr>
          <th>手续费（元）</th>
          <td>{{ transferInfo.serviceCharge | numberFilter(2) }}</td>
          <th>失败总金额（元）</th>
          <td>{{ transferInfo.totalFailedAmt | numberFilter(2) }}</td>
        </tr>
      </table>

      <table class="print-detail">
        <thead>
          <tr>
            <th width="5%">序号</th>
            <th width="10%">收款账号</th>
            <th width="10%">收款名称</th>
            <th width="10%">开户银行</th>
            <th width="10%">付款总金额（元）</th>
            <th width="10%">手续费（元）</th>
            <th width="10%">转账附言</th>
            <th width="10%">短信通知</th>
            <th width="10%">交易状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in transferDataList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.PayeeAcNo | formatStringFilter }}</td>
            <td>{{ item.PayeeAcName }}</td>
            <td>{{ item.openBank }}</td>
            <td>{{ item.payMoney | numberFilter(2) }}</td>
            <td>{{ item.TotalFee | numberFilter(2) }}</td>
            <td>{{ item.transferPostscript }}</td>
            <td>{{ item.Phone }}</td>
            <td>{{ $msg('dealStateDict')[item.dealState] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ui-container>
</template>

<script>
import resultApi from '@/api/components.js';
import transferRemitApi from '@/api/transferRemit';
import printJs from '@/common/mixin/print.js';
import printStyle from '!css-loader!sass-loader!@/style/print/common/table-special.scss';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
export default {
  mixins: [pagination, printJs],
  data() {
    return {
      timer: '',
      dealState: ['1', '2', '7', '8', '9', '10', '15'],
      transferInfo: {},
      selected: 'all', // 全部明细/成功明细/失败明细
      selectStatus: ['all', 'success', 'failed'],
      transferDataList: [], // 表格数据
      payerInfo: this.getData().payerInfo || {},
      activeNames: ['1', '2'], // 折叠菜单
      resultInfo: {},
      isLoading: false,
      isBtnLoading: false,
      isConfLoad: false,
      undoResMsg: '',
      undoResIcon: 'warning', // 撤销结果弹框图标
      undoTransferData: null,
      showConf: false, // 撤销弹框是否显示
      showSure: false, // 撤销结果弹框是否显示
    };
  },
  created() {
    // 查询转账进度
    this.qryResultInfo();
  },
  methods: {
    // 撤销弹框控制
    showUndoDialog() {
      this.undoTransferData = this.payerInfo.PayerAcNo;
      this.showConf = true;
    },
    // 撤销操作确认
    async undoTransfer() {
      try {
        this.isConfLoad = true;
        let res = await transferRemitApi.transferUndo(this.undoTransferData);
        if (res.status === '0') {
          this.undoResMsg = '撤销成功';
          this.undoResIcon = 'success';
          this.timer = setTimeout(() => {
            this.goback();
          }, 3000);
        } else {
          this.undoResMsg = '撤销失败';
          this.undoResIcon = 'waring';
        }
        this.showSure = true;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isConfLoad = false;
      }
    },
    // 查询转账进度
    async qryResultInfo() {
      try {
        this.isLoading = true;
        let res = await resultApi.getResultQry(this.payerInfo);
        this.resultInfo = res.data;
        this.searchCall();
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    // 打印
    onPrint() {
      this.print('print-form', printStyle);
    },
    // 初始化请求接口信息
    async searchList() {
      try {
        this.isLoading = true;
        await transferRemitApi.getTransferBatchQueryDetail().then((res) => {
          this.transferDataList = res.List;
          this.transferInfo = res.info;
          this.total = Number(res.TotalCount);
        });
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    // radio切换：全部明细/成功明细/失败明细
    changeFactor(val) {
      this.searchCall();
      this.selected = val;
    },
    //  格式化序号
    formatIndex(index) {
      let result = index + 1;
      if (result / 10 < 1) {
        return '0' + result;
      }
      return result;
    },
    // 下载
    async download() {
      try {
        if (!this.transferDataList) {
          this.$message('当前暂无数据！请先点击查询');
        } else {
          this.isBtnLoading = true;
          const result = await transferRemitApi.getTransferDetail(this.payerInfo);
          this.downloadFiles(result, '转账交易查询', 'xlsx');
        }
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isBtnLoading = false;
      }
    },
    goback() {
      this.$router.back();
    },
  },
  beforeDestroy() {
    this.clearData();
    clearTimeout(this.timer);
  },
};
</script>
<style lang="scss">
.transfer-bitch-detail {
  position: relative;

  .transfer-inquiry-conf {
    .transfer-detail {
      .tansfer-info {
        display: flex;
        padding: 20px 20px 0;
        .title {
          font-size: $s18;
          color: $color-text-hover;
          line-height: 25px;
        }
        .left-info {
          width: 280px;
          .pay-info {
            opacity: 0.8;
            width: 100%;
            height: 120px;
            background: linear-gradient(180deg, #4072ee, #3457dd);
            border-radius: 4px;
            margin-top: 7px;
            position: relative;
            overflow: hidden;
            .pay-info_bg {
              background: url('~@/assets/image/transferRemit/basic.png') no-repeat;
              width: 44px;
              height: 36px;
              background-size: contain;
              font-size: $s12;
              line-height: 30px;
              text-align: center;
              position: absolute;
              right: 11px;
              top: 0;
              color: #aec5ff;
            }
            .pay-name {
              font-size: $s14;
              text-align: left;
              color: $color-text-primary;
              line-height: 20px;
              margin: 33px 0 9px 16px;
            }
            .pay-num {
              color: $color-text-primary;
              margin-left: 16px;
              font-size: $s16;
            }
          }
        }
        .center-info {
          box-sizing: border-box;
          padding: 84px 29px 0 25px;
          img {
            width: 55px;
          }
        }
        .right-info {
          flex: 1;
          // 批量转账信息汇总
          .total-info {
            width: 100%;
            border-collapse: collapse;
            th,
            td {
              font-size: $s14;
              height: 40px;
              border: 1px solid $color-border-3;
              padding: 0 9px;
            }
            th {
              text-align: left;
              font-weight: normal;
              color: $color-info;
              background: #f7f9fb;
            }
          }
        }
      }
      .table-title {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 16px;
        padding: 0 20px;
        height: 25px;
        .title-text {
          font-size: $s18;
          color: $color-text-hover;
          line-height: 25px;
          height: 25px;
          display: block;
        }
        .ui-radio-group {
          display: flex;
          align-items: center;
        }
      }
      .table-detail {
        .pagination {
          margin-bottom: 10px;
        }
      }
    }
  }
  // 隐藏打印域
  #print-form {
    display: none;
  }
}
</style>
